<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html style='height:100%'>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>业务员年度销售额</title>
<meta charset="utf-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Access-Control-Allow-Origin" content="*">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<link rel="icon" href="favicon.ico">
<link rel="stylesheet" href="${ctx }/resources/layui/css/layui.css"
	media="all" />
<link rel="stylesheet" href="${ctx }/resources/css/public.css"
	media="all" />
</head>
<body class="childrenBody" style="height: 100%; margin: 0">

	<!-- 搜索条件开始 -->
	<fieldset class="layui-elem-field layui-field-title"
		style="margin-top: 20px;">
		<legend>查询条件</legend>
	</fieldset>
	<form class="layui-form" method="post" id="searchFrm">
		<div class="layui-form-item">
			<div class="layui-inline">
			      <label class="layui-form-label">选择年份:</label>
			      <div class="layui-input-inline">
			        <input type="text" id="year" autocomplete="off" class="layui-input">
			      </div>
		     </div>
			<div class="layui-inline">
		            <button type="button" class="layui-btn layui-btn-normal  layui-icon layui-icon-search" id="doSearch">查询</button>
		     </div>
		 </div>
	</form>

	<div id="container" style="height: 100%"></div>
	<script type="text/javascript" src="${ctx}/resources/js/echarts.min.js"></script>
	<script type="text/javascript"
		src="${ctx}/resources/js/jquery-3.1.1.min.js"></script>
	<script src="${ctx }/resources/layui/layui.js"></script>
	<script type="text/javascript">
		layui.use([ 'jquery', 'layer', 'form', 'table', 'laydate'], function() {
			var $ = layui.jquery;
			var layer = layui.layer;
			var form = layui.form;
			var table = layui.table;
			var laydate = layui.laydate;
			
			laydate.render({
				elem:"#year",
				type:"year",
				value:new Date()
			})
			
			$("#doSearch").click(function(){
				getData();
			})
			getData();
			function getData(){
				var year = $("#year").val();
				if(year==""){
					year=new Date().getFullYear();
				}
				$.post("${ctx}/stat/loadOpernameYearGradeStat.action",{year:year},function(data){
					var dom = document.getElementById("container");
					var myChart = echarts.init(dom);
					var app = {};
					option = null;
					option = {
						title : {
							text : '业务员年度销售额',
							subtext : '真实有效',
							left : 'center'
						},
						tooltip : {
							trigger : 'item',
							formatter : '{a} <br/>{b} : {c}'
						},
						xAxis : {
							type : 'category',
							data : data.name
						},
						yAxis : {
							type : 'value'
						},
						series : [ {
							name : '销售额',
							data : data.value,
							type : 'bar'
						} ]
					};
					;
					if (option && typeof option === "object") {
						myChart.setOption(option, true);
					}
				})
			}
		});
	</script>
</body>
</html>